/* 定义 Mermaid 图表容器的基础样式 */
.mermaid-container {
	margin: 15px 0;
	padding: 15px;
	min-width: 100%;
	min-height: 100px;
	background: var(--background-f2f7fa, #f8f9fa);
	border: 1px solid var(--border-e1e6f0, #dee2e6);
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	overflow: auto;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
	transition: all 0.3s ease;
}

/* 激活状态样式 */
.mermaid-container:active {
	cursor: grabbing;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 深色模式适配 */
.dark-mode .mermaid-container {
	background: var(--background-f8f9fa, #2d3748);
	border-color: var(--dark-border, #4a5568);
}

/* 错误提示样式 */
.mermaid-error {
	color: var(--status-dc3545, #e53e3e);
	padding: 15px;
	font-size: 0.95rem;
	background: rgba(229, 62, 62, 0.1);
	border-radius: 6px;
	overflow-x: auto;
}

.echarts-error {
	color: var(--status-dc3545, #e53e3e);
	padding: 15px;
	font-size: 0.95rem;
	background: rgba(229, 62, 62, 0.1);
	border-radius: 6px;
	overflow-x: auto;
}

/* SVG 基础样式 */
.mermaid-container svg {
	-webkit-user-select: none;
	display: block;
	margin: 0 auto;
	overflow: visible !important;
	touch-action: none;
	user-select: none;
	transform-origin: 0 0;
	transition: transform 0.2s ease-out;
}